<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" xmlns:https="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <!--semantic-ui-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link th:href="@{/qinjiang/css/qinstyle.css}" rel="stylesheet">
</head>
<body>

<!--主容器-->

<div class="ui container" style="background-image: url(https://img2.baidu.com/it/u=880369842,2876427537&fm=26&fmt=auto)">




    <div class="ui segment" id="index-header-nav" th:fragment="nav-menu">
        <div class="ui secondary menu">
            <button class="ui primary button" ><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
返回
            </font></font></button>
            <div class="ui labeled button" tabindex="0">
                <div class="ui button">
                    <i class="heart icon"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 支持我们
                </font></font></div>
                <a class="ui basic label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                    2,048
                </font></font></a>
            </div>
            <a class="item" style="background-color: dodgerblue" th:href="@{/index}">首页</a>

            <!--登录注销-->
            <!--登录注销-->
            <div class="right menu">

                <!--如果未登录-->
                <div sec:authorize="!isAuthenticated()"><!---判断是否登录--->
                    <a class="item" th:href="@{/toLogin}"><!---跳转到controller层的/toLogin--->
                        <i class="address card icon"></i> 登录
                    </a>
                </div>

                <!--如果已登录-->
                <div sec:authorize="isAuthenticated()"> <!---判断是否登录--->
                    <a class="item">
                        <i class="address card icon"></i>
                        用户名：<span sec:authentication="principal.username"></span> <!---获取当前用户名--->
                        角色：<span sec:authentication="principal.authorities"></span> <!---判断当前用户权限--->
                    </a>
                </div>
                <!--注销功能--->
                <div sec:authorize="isAuthenticated()">
                    <a class="item" th:href="@{/logout}"> <!---自带的注销方法--->
                        <i class="sign-out icon"></i>注销
                    </a>
                </div>
            </div>
        </div>
    </div>

<!--    <div class="ui segment"  style=" height:80px " >-->
<!--        <div class="ui active dimmer">-->
<!--            <div class="ui text loader">正在加载最新消息...</div>-->
<!--        </div>-->
<!--        <p></p>-->
<!--    </div>-->
    <div class="ui comments">
        <h3 class="ui dividing header"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">论坛</font></font></h3>
        <div class="comment">
            <a class="avatar">
                <i class="baseball ball icon"></i>
            </a>
            <div class="content">
                <a class="author"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">陈自楠</font></font></a>
                <div class="metadata">
                    <span class="date"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">今天下午 5:42</font></font></span>
                </div>
                <div class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                    哈哈哈哈哈！
                </font></font></div>
                <div class="actions">
                    <a class="reply"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">回复</font></font></a>
                </div>
            </div>
        </div>
        <div class="comment">
            <a class="avatar">
                <i class="baseball ball icon"></i>
            </a>
            <div class="content">
                <a class="author"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">金鑫</font></font></a>
                <div class="metadata">
                    <span class="date"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">昨天中午 12:30</font></font></span>
                </div>
                <div class="text">
                    <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">我们一起学习Spring吧！</font><font style="vertical-align: inherit;">也谢谢！</font></font></p>
                </div>
                <div class="actions">
                    <a class="reply"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">回复</font></font></a>
                </div>
            </div>
            <div class="comments">
                <div class="comment">
                    <a class="avatar">
                        <i class="baseball ball icon"></i>
                    </a>
                    <div class="content">
                        <a class="author"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">王奎智</font></font></a>
                        <div class="metadata">
                            <span class="date"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">现在</font></font></span>
                        </div>
                        <div class="text"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                            Security真难
                        </font></font></div>
                        <div class="actions">
                            <a class="reply"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">回复</font></font></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <form class="ui reply form">
            <div class="field">
                <textarea></textarea>
            </div>
            <div class="ui blue labeled submit icon button">
                <i class="icon edit"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 添加回复
            </font></font></div>
        </form>
    </div>

    <div>
        <br>
        <div class="ui three column stackable grid">
            <div class="column" sec:authorize="hasRole('vip1')"> <!--只有权限vip1的才能访问到--->
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">用户权限</h5>
                            <hr>
                            <div><a th:href="@{/level1/1}"><i class="baseball ball icon"></i> 查看信息</a></div>
                            <div><a th:href="@{/level1/2}"><i class="address book outline icon"></i> 修改信息</a></div>
                            <div><a th:href="@{/level1/3}"><i class="archive icon"></i>浏览记录</a></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column" sec:authorize="hasRole('vip2')"> <!--只有权限vip2才能访问到--->
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">管理员权限</h5>
                            <hr>
                            <div><a th:href="@{/level2/1}"><i class="baseball ball icon"></i> 查看用户</a></div>
                            <div><a th:href="@{/level2/2}"><i class="address book outline icon"></i>修改用户</a></div>
                            <div><a th:href="@{/level2/3}"><i class="archive icon"></i> 浏览记录</a></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column" sec:authorize="hasRole('vip3')"> <!--只有权限vip3的才能访问到--->
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">游客权限</h5>
                            <hr>
                            <div><a th:href="@{/level3/1}"><i class="baseball ball icon"></i> 查看信息</a></div>
                            <div><a th:href="@{/level3/2}"><i class="archive icon"></i>浏览记录</a></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    
</div>


<script th:src="@{/qinjiang/js/jquery-3.1.1.min.js}"></script>
<script th:src="@{/qinjiang/js/semantic.min.js}"></script>

</body>
</html>